<template>
  <!-- 
    软件分类的删除，添加，修改功能完成
    软件的修改，删除功能完成
    游戏发行商和游戏功能，电影和电影排片功能
  -->
  <div>
    <el-button type="primary" @click="showQueryType">{{ atype }}</el-button>
    <el-button type="primary" @click="query">查询</el-button>
    <el-button type="primary" @click="requery">重置</el-button>
    <el-button type="primary" @click="avisible = true">添加软件</el-button>
  </div>

  <div>
    <!-- {{ list }} -->
    <el-table :data="list">
      <el-table-column prop="sid" label="软件编号" />
      <el-table-column prop="sname" label="软件名称" />
      <el-table-column prop="intro" label="软件简介" />
      <el-table-column prop="vendor" label="软件厂商" />
      <el-table-column prop="type.tname" label="所属分类" />
    </el-table>

    <PageComp :page="page" @dochange="query" />
  </div>

  <!-- 添加的对话框 -->
  <el-dialog title="添加软件" v-model="avisible" @closed="query">
    <div>
      <el-form>
        <el-form-item label="所属分类">
          <el-button type="primary" @click="showAddType">
            {{ typeinfo }}
          </el-button>
        </el-form-item>

        <el-form-item label="软件名称">
          <el-input v-model="addInfo.sname" />
        </el-form-item>
        <el-form-item label="软件厂商">
          <el-input v-model="addInfo.vendor" />
        </el-form-item>
        <el-form-item label="软件简介">
          <el-input v-model="addInfo.intro" type="textarea" :rows="8" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button type="danger" @click="avisible = false">取消</el-button>
      <el-button type="primary" @click="resetAdd">重置</el-button>
      <el-button type="success" @click="add">发布</el-button>
    </template>
  </el-dialog>

  <!-- 分类选择的对话框 -->
  <el-dialog title="选择分类" v-model="tvisible">
    <SoftTypeSelector @info-selected="typeSelected"></SoftTypeSelector>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { Api } from '../../script/Api';
import PageComp from '../../components/PageComp.vue';
import { ElMessage } from 'element-plus';
import SoftTypeSelector from '../../components/SoftTypeSelector.vue';

// 分类选择的变量
const tvisible = ref(false);
const tmode = ref('');

const typeSelected = (info) => {
  if (tmode.value == 'add') {
    addInfo.value.stid = info.stid;
    typeinfo.value = info.tname;
    tvisible.value = false;
  } else if (tmode.value == 'query') {
    queryInfo.value.stid = info.stid;
    atype.value = info.tname;
    tvisible.value = false;
  }
};

//#region 添加的部分
const addInfo = ref({
  stid: -1,
  sname: '',
  intro: '',
  vendor: '',
});

const resetAdd = () => {
  addInfo.value = {
    stid: -1,
    sname: '',
    intro: '',
    vendor: '',
  };
  typeinfo.value = '请选择分类...';
};

const avisible = ref(false);
const add = () => {
  Api.post('/crud/software', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
      resetAdd();
    } else {
      ElMessage.error(data.message);
    }
  });
};

const typeinfo = ref('请选择分类...');

const showAddType = () => {
  tvisible.value = true;
  tmode.value = 'add';
};

//#endregion

//#region 查询的部分
const atype = ref('请选择分类');

const showQueryType = () => {
  tvisible.value = true;
  tmode.value = 'query';
};

const page = ref({
  pageSize: 5,
  pageNumber: 1,
});

const queryInfo = ref({
  stid: -1,
  sname: '',
  vendor: '',
});

const requery = () => {
  queryInfo.value = {
    stid: -1,
    sname: '',
    vendor: '',
  };
  page.value = {
    pageSize: 5,
    pageNumber: 1,
  };
  atype.value = '请选择分类';
  query();
};

const list = ref([]);

const query = () => {
  Api.get(
    `/crud/software/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data) => {
      if (data.success) {
        list.value = data.data.data;
        page.value = data.data.pageBean;
      } else {
        ElMessage.error(data.message);
      }
    }
  );
};

query();

//#endregion
</script>
<style scoped></style>
